<!-- 充值服务协议弹出框 -->
<!-- 充值服务协议弹出框 -->
<template>
  <mxp-popup ref="mxpPopupRef" :pageHeight="pageHeight" :height="`${height}px`" :toolbarOptions="{ showConfirm: false, title: '充值服务协议', height: '60px' }">
    <scroll-view :scrollY="true" :style="{ height: `${height - 40}px` }">
      <recharge-agreement></recharge-agreement>
    </scroll-view>
  </mxp-popup>
</template>

<script setup lang="ts">
  import { type PropType, ref } from 'vue';
  import MxpPopup from '@/mxp-ui/mxp-popup/mxp-popup.vue';
  import RechargeAgreement from './recharge-agreement.vue';
  import type { $AllSizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  defineOptions({
    name: 'recharge-agreement-popup',
  });

  defineProps({
    /** 页面高度 */
    pageHeight: { type: String as PropType<$AllSizeUnitStr>, default: '100vh' },
    /** 高度 */
    height: { type: Number, default: 0 },
  });

  const mxpPopupRef = ref<InstanceType<typeof MxpPopup> | null>(null);

  /** 显示 */
  function show() {
    mxpPopupRef.value?.show();
  }

  /** 隐藏 */
  function hide() {
    mxpPopupRef.value?.hide();
  }

  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
  });
</script>
